// pages/cpn-observers/cpn-observers/index.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    
  },

  /**
   * 组件的初始数据
   */
  data: {
    userInfo: {
      username: 'little',
      sex: 'female'
    },
    arr: [1,2,3,4,5,6],
  },

  lifetimes: {
    attached(){
      this.setData({
        arrJoin: this.data.arr.join(',')
      })
    }
  },

  observers: {
    'userInfo.username': function(username) {
      // 使用setData设置this.data.userInfo.username时触发 使用setData设置this.data.userInfo也会触发
      console.log(username);
    },

    'arr[2]': function(arr2) {
      // 使用setData设置this.data.arr[2]时触发 使用setData设置this.data.arr也会触发
      console.log(arr2);
      console.log(this.data.arr);
      this.setData({
        arrJoin: this.data.arr.join(',')
      })
      // 如果在数据监听器函数中使用 setData 设置本身监听的数据字段，可能会导致死循环，需要特别留意。 
      // this.setData({arr: this.data.arr})
    },
    
    // 如果需要监听所有子数据字段的变化，可以使用通配符 ** 。
    'userInfo.**': function(userInfo) {
      // 使用setData设置this.data.userInfo.username时触发 使用setData设置this.data.userInfo也会触发
      console.log(userInfo);
    },
    // 特别地，仅使用通配符 ** 可以监听全部 setData 。
    // '**': function(data) {
    //   // 使用setData设置this.data.userInfo.username时触发 使用setData设置this.data.userInfo也会触发
    //   console.log(data);
    // },
    // 数据监听器监听的是 setData 涉及到的数据字段，即使这些数据字段的值没有发生变化，数据监听器依然会被触发。
    // 如果在数据监听器函数中使用 setData 设置本身监听的数据字段，可能会导致死循环，需要特别留意。 ***
    // 数据监听器和属性的 observer 相比，数据监听器更强大且通常具有更好的性能。
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeUsername(){
      /**使用setData赋值 */
      // 1、构造变量，重新赋值
      // let tempArr = this.data.arr
      // tempArr[2] = 10
      // this.setData({
      //   'userInfo.username': 'plum',
      //   arr: tempArr
      // })
      // 2、使用['字符串']，[]也可以不写--数组不要直接展示，使用其他方式转化为字符串再展示
      // 当字符串中含有变量时  使用`arr[${index}]`,并且外层的[]不可省略

      const index = 3
      this.setData({
        // ['userInfo.username']: 'plum',
        // ['arr[2]']: 10

        'userInfo.username': 'plum',
        'arr[2]': 10,
        [`arr[${index}]`]: 20
      })
    }
  }
})